<!--头部公共部分-->
{include file="common/header" /}
<style>
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }
</style>
<div style="padding:15px;">
    <form class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>用户组</label>
            <div class="layui-input-block">
                {volist name="groups" id="group"}
                    <input type="radio" name="group_id" value="{$group['id']}" class="layui-input" title="{$group['title']}" checked/>
                {/volist}
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <label class="layui-form-label">区域</label>
            <div class="layui-input-block">
                {volist name="regional" id="v"}
                <input type="checkbox" lay-filter="regional"  lay-skin="primary" name="regional_id" value="{$v['id']}" title="{$v['regional_name']}"/>
                {/volist}
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>手机</label>
            <div class="layui-input-block">
                <input type="number" name="mobile" min="0" lay-verify="required" autocomplete="off" placeholder="请输入手机号码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>密码</label>
            <div class="layui-input-block">
                <input type="password" name="password"  lay-verify="required" autocomplete="off" placeholder="请输不少于6位的密码" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red;">*</span>姓名</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输姓名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="1" class="layui-input" title="男" checked/>
                <input type="radio" name="gender" value="2" class="layui-input" title="女"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">绑定小程序</label>
            <div class="layui-input-block">
                <input type="checkbox" name="set" lay-filter="set" title="是否开通小程序?" lay-skin="primary">
            </div>
        </div>
        <div class="layui-form-item"  id="x-div" style="display: none">
            <label class="layui-form-label">权限选择</label>
            <div class="layui-input-block">
                <input type="checkbox" lay-filter="item" name="ids" title="客户" value="1" lay-skin="primary">
                <input type="checkbox" lay-filter="item" name="ids" title="学员" value="2" lay-skin="primary">
                <input type="checkbox" lay-filter="item" name="ids" title="课程" value="3" lay-skin="primary">
                <input type="checkbox" lay-filter="item" name="ids" title="财务" value="4" lay-skin="primary">
                <input type="checkbox" lay-filter="item" name="ids" title="总览" value="5" lay-skin="primary">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" name="wtype" value="{$type}">
                <input class="layui-btn" lay-submit lay-filter="form" value="立即提交" readonly>
            </div>
        </div>
    </form>
</div>
<!--底部公共部分-->
{include file="common/footer" /}
<script>
    layui.use(['element', 'jquery','form','layer'], function(){
        var $ = layui.jquery
                ,element = layui.element
                ,layer = layui.layer
                ,form = layui.form;


        let inputs = document.getElementsByName("ids");
        let center_status = 0;  //0表示未绑定，1表示已绑定
        form.on('checkbox(set)', function(data){

            if(data.elem.checked){
                center_status = 1;
                document.getElementById("x-div").style.display="block";
            }else{
                center_status = 0;
                document.getElementById("x-div").style.display="none";
            }

        });

        var regional_id = [];
        form.on('checkbox(regional)', function(data){
            regional_id = [];
            var regional_inputs = document.getElementsByName("regional_id");
            for(var i=0;i<regional_inputs.length;i++){
                    if (regional_inputs[i].checked) {
                        regional_id.push(regional_inputs[i].value);
                    }
            }

        });

        let checked_ids = [];
        //监听提交
        form.on('submit(form)', function (data) {
            var field = data.field;
			if(regional_id.length <= 0){
                layer.msg('请勾选区域');
                return;
            }
            field.regional_id = regional_id;
			field.company_id = '{$company_id}'; //集团ID
            field.password = $('input[name=password]').val();
            if((field.password).length < 6){
                layer.msg('请输不少于6位的密码');
                return false;
            }

            field.mobile = $('input[name=mobile]').val();
            if((field.mobile).length != 11){
                layer.msg('请输正确的11位手机号码');
                return false;
            }
            if(center_status == 1){
                checked_ids = [];
                for(var i=0;i<inputs.length;i++){
                    if(inputs[i].checked){
                        checked_ids.push(inputs[i].value)
                    }
                }
            }

            if(center_status == 1 && checked_ids.length <= 0){
                layer.msg('请选择小程序权限');
                return false;
            }

            field.status_center = center_status;
            field.auth_rules = checked_ids.join(',');

            var isLoad;
            $.ajax({
                url: '{:url("User/add_regional")}',
                method: "post",
                data: field,
                beforeSend: function () {
                    isLoad = layer.load(0, {
                        shade: false
                    }); //0代表加载的风格，支持0-2
                },
                success: function (result) {
                    layer.msg(result.msg);
                    if (result.code === 1) {
                        setTimeout(function () {
                            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                            parent.layer.close(index); //再执行关闭
                            parent.location.reload();
                        }, 2000);
                    }
                },
                complete: function () {
                    layer.close(isLoad)
                },
                error: function (error) {
                    console.log(error)
                }
            });
            return false;
        });
    });

</script>